<template>
  <div class="sidebar">
    <!-- 必须是route模式，仅展示一子菜单 -->
    <el-menu
      class="el-menu-vertical-demo"
      :unique-opened="true"
      :default-active="activeIndex"
      background-color="#455F85"
      text-color="#fff"
      active-text-color="#EECC13"
      @select="handleSelect"
      @open="handleOpen"
      @close="handleClose"
      router
    >
      <side-menu-item :routes="routes"></side-menu-item>
    </el-menu>
  </div>
</template>
<script>
import sideMenuItem from "./sideMenuItem";
export default {
  data() {
    return {
      activeIndex: "/helpPage/d",
      isCollapse: true
    };
  },
  computed: {
    routes() {
      let nowRoutes = this.$router.options.routes.filter(item => {
        return item.path == this.$route.path;
      });
      if (nowRoutes.length > 0) {
        localStorage.setItem("Menu", JSON.stringify(nowRoutes[0].children));
        return nowRoutes[0].children;
      } else {
        return JSON.parse(localStorage.getItem("Menu"));
      }
      console.log(JSON.parse(localStorage.getItem("Menu")), "路由");
    }
  },
  mounted() {
    this.activeIndex = this.$route.path;
    console.log(this.activeIndex, "当前选中");
  },
  methods: {
    handleOpen(key, val) {
      console.log(key, val, "展开");
    },
    handleClose(key, val) {
      console.log(key, val, "收起");
    },
    handleSelect(index) {
      this.activeIndex = index;
      console.log(index, 11111);
    }
  },
  components: {
    sideMenuItem
  }
};
</script>
<style lang="less" scoped>
.sidebar {
  width: 200px;
  height: calc(100vh - 80px);
  background: #455f85;
  overflow-y: scroll;
}
/deep/ .el-menu-item.is-active {
  background-color: #2e4668 !important;
  color: #eecc13 !important;
}
</style>